<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:18:50
 * @LastEditTime : 2021-09-10 10:22:16
 * @FilePath     : /newhope/src/components/happyReunion/index.vue
 * @Description  : 
-->
<script lang="ts">
export interface happyReunionProps {
  status: number; // 1 = 留言 2 = 安慕希游戏
}
</script>
<script setup lang="ts">
import { Title, Message, Gamge } from "/@/components";
import {
  withDefaults, onMounted, onUnmounted
} from "vue";
import { useClound } from "./hooks/useClound";
import MidAutumnFestivalTitle from "/@/assets/images/title/MidAutumnFestivalTitle.png";
import midAutumnFestivaL from "/@/assets/images/title/midAutumnFestivaL.png";
import { mikeChange, mikeClear, clearMikeNum } from "/@/utils/mikeChange";
import { useGo } from "/@/hooks/go";
import { PageProps } from "/@/page/gameSuccess/define";
const mikeList = useClound();
let timer = 0
const [go] = useGo();
onMounted(() => {
  if (props.status === 2)
    // @ts-ignore
    timer = setTimeout(() => {
      go({
        name: "gameSuccess",
        query: { num: clearMikeNum(mikeList.value).toString() } as PageProps,
      });
    }, 20000)
})
onUnmounted(() => {
  if (props.status === 2)
    clearTimeout(timer)
})
const props = withDefaults(defineProps<{ status: number }>(), {
  status: 2,
});
function onClickMike(res: { index: number; total: number }) {
  mikeList.value = mikeChange(mikeList.value, res.index);
  if (mikeClear(mikeList.value)) {
    go({
      name: "gameSuccess",
      query: { num: clearMikeNum(mikeList.value).toString() } as PageProps,
    });
  }
}
</script>
<template>
  <div class="happyReunion">
    <img class="bkg pulsate-bck" src="../../assets/images/bkg/happyReunion.jpg" />
    <Title v-if="props.status === 2" :src="MidAutumnFestivalTitle" />
    <Message v-if="props.status === 1" :titleImg="midAutumnFestivaL" />
    <Gamge @on-mike-click="onClickMike" v-if="props.status === 2" :list="mikeList" />
  </div>
</template>
<style lang="scss" scoped>
.pulsate-bck {
  -webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
  animation: pulsate-bck 1.5s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.happyReunion {
  user-select: none;
  position: relative;
  height: 100%;
  width: 100%;
  // background: url("../../assets/images/bkg/happyReunion.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .bkg {
    user-select: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("../../assets/images/bkg/happyReunion.jpg");
  }
}
</style>
